<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>取消请求</h1>
    <button id="send">发送请求</button>
    <button id="cancel">取消请求</button>


    <script>
        const send = document.querySelector('#send')
        const cancel = document.querySelector('#cancel')

        // 创建一个取消请求的对象（该对象为构造函数）

        // const myAxios = axios.create({
        //     baseURL: '/',
        //     timeout: 10000,
        //     headers: {}
        // })
        // const CancelToken = axios.CancelToken

        // send.onclick = async function () {
        //     let cancel = null
        //     try {
        //         const re = await myAxios.get(
        //             '/getlast', {
        //                 params: {
        //                     userId: '001'
        //                 },
        //                 // 在配置对象中配置一个CancelToken的配置项
        //                 // 该配置项的值为CancelToken的实例，实例接收的参数为一个回调函数 
        //                 // 该回调函数的返回值是一个函数 该函数是取消请求发送的函数
        //                 cancelToken: new CancelToken((c) => {
        //                     console.log(c);
        //                     cancel = c
        //                 })
        //             }
        //         )
        //         console.log(re.data.data);
        //     } catch (e) {
        //         console.log(e.message);
        //     }
        // }

        // cancel.onclick = function(){
        //     cancel() //一旦请求被中断就会进入catch处理异常
        // }
   
   
        


        // 创建一个取消发送的对象
        const CancelToken = axios.CancelToken

        // 创建一个axios实例
        const myAxios = axios.create({
            baseURL:'/',
            timeout:10000,
            headers:{}
        })

       

        send.onclick = async function(){
            let cancel = null  //注意 此处不能用const声明 cancel为一个变量
           try{
            const re = await myAxios.get(
                '/getlast',{
                    params:{
                        userId:'001'
                    },
                    // 给配置对象配置一个配置项
                    // 配置项的值为一个CancelToken实例 实例接收的参数为一个回调函数 回调函数的参数为一个取消请求发送的函数 当该函数被调用时 就可以取消发送请求
                    cancelToken:new CancelToken((c)=>{
                        cancel=c
                    })
                }
            )
            console.log(re.data);
           }catch(e){
            console.log(e.message);
           }
        }

        cancel.onclick = function(){
            cancel()
        }
   </script>
</body>

</html>